<template>
  <div>
    <el-card style="margin:20px;">
      <el-row>
        <h3>学生管理</h3>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-input placeholder="学生姓名" clearable v-model="greatStudent.greatStuname">
            <template slot="prepend">学生姓名</template>
          </el-input>
          <el-input placeholder="就职企业" clearable v-model="greatStudent.greatCompany">
            <template slot="prepend">就职企业</template>
          </el-input>
          <el-select placeholder="就职岗位" v-model="greatStudent.greatPost" clearable>
            <el-option v-for="(item,index) in strList" :key="index" :label="item" :value="item"></el-option>
          </el-select>
          <el-button type="primary" style="margin-left:10px " @click="getStudentList">查询</el-button>
          <el-button type="warning" @click="resetBtn">重置</el-button>
          <el-button type="danger" @click="removeStudents">批量删除</el-button>
          <!--<el-button type="success" @click="exportData">批量导出</el-button>-->
        </el-col>
      </el-row>
      <el-row></el-row>
      <el-table border stripe :data="studentList" ref="studentRef">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column label="序号" type="index" width="60px">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ (page - 1) * limit + (scope.$index + 1) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="照片" prop="greatBigimg">
          <template slot-scope="scope">
            <img style="width:30px;" :src="scope.row.greatBigimg" />
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="greatStuname" show-overflow-tooltip></el-table-column>
        <el-table-column label="毕业学校" prop="greatSchool" show-overflow-tooltip></el-table-column>
        <el-table-column label="专业" prop="greatProfession" show-overflow-tooltip></el-table-column>
        <el-table-column label="就业职位" prop="greatPost" show-overflow-tooltip></el-table-column>
        <el-table-column label="就业企业" prop="greatCompany" show-overflow-tooltip></el-table-column>
        <el-table-column label="毕业感言" prop="greatWords" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-tooltip class="item" effect="dark" content="编辑资料" placement="top" style="margin: 0 10px">
              <el-button type="primary" class="el-icon-edit" circle @click="editStudent(scope.row.greatStuid)"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除学生" placement="top">
              <el-button type="danger" class="el-icon-delete" circle @click="removeStudent(scope.row.greatStuid)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        style="margin-top: 20px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15]"
        :page-size="limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background
      ></el-pagination>
    </el-card>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  created() {
    this.getGreatPostList()
    this.getStudentList()
  },
  name: 'manageStudent',
  data() {
    return {
      studentList: [], //新闻列表
      page: 1, //当前页
      limit: 5, //每页记录数
      total: 0, //总记录数
      /*查询条件条件对象*/
      greatStudent: {
        /*学生姓名*/
        greatStuname: '',
        /*就职岗位*/
        greatPost: '',
        /*就职公司*/
        greatCompany: ''
      },
      //公司岗位
      strList: [],
      //学生id数组
      ids:[]
    }
  },
  methods: {
    /*获取就业岗位*/
    async getGreatPostList() {
      let result = await this.$http.student.reqGetGreatPostList()
      if (result.code !== 200) return this.$message.error('就业岗位获取失败')
      this.strList = result.data.postList
    },
    async getStudentList() {
      let result = await this.$http.student.reqStudentPage(this.page, this.limit, this.greatStudent)
      console.log(result)
      if (result.code !== 200) return this.$message.error('学生列表获取失败')
      this.studentList = result.data.rows
      this.total = result.data.total
    },
    //.分页:显示数据行数的监听事件
    handleSizeChange(newSize) {
      this.limit = newSize
      this.getStudentList()
    },
    //.分页:页码改变监听事件
    handleCurrentChange(newPage) {
      this.page = newPage
      this.getStudentList()
    },
    //重置按钮
    resetBtn() {
      this.greatStudent = {}
      this.getStudentList()
    },
    //删除学生
    async removeStudent(id) {
      const confrimResult = await this.$confirm('此操作将永久删除该学生是否继续?', '删除提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消操作',
        type: 'warning'
      }).catch(err => err)
      if (confrimResult !== 'confirm') return this.$message.info('删除操作已取消')
      let result = await this.$http.student.reqDeleteStudent(id)
      if (result.code !== 200) return this.$message.error(result.message)
      this.$message.success('成功删除')
      this.getStudentList()
    },
    //编辑学生
    editStudent(id) {
      this.$router.push(`/student/addStudent/${id}`)
    },
    /**
     * 批量删除学生
     * @returns {Promise<ElMessageComponent>}
     */
    async removeStudents() {
      //判断是否选中
      if (this.$refs.studentRef.selection.length <= 0) {
        return this.$message.warning("请先选中学生!")
      }

      //判断是否确认删除
      const confrimResult = await this.$confirm('此操作将永久删除选中学生是否继续?', '删除提示', {
        confirmButtonText: '确认删除',
        cancelButtonText: '取消操作',
        type: "warning"
      }).catch(err => err)
      if (confrimResult !== "confirm") {
        return this.$message.info("删除操作已取消")
      }
      //根据id数组批量删除新闻
      this.$refs.studentRef.selection.forEach(item => {
        this.ids.push(item.greatStuid)
      })
      let result = await this.$http.student.reqRemoveStudents(this.ids)
      if (result.code !== 200) return this.$message.error(result.message)
      this.$message.success("批量删除成功")
      this.ids = []
      this.getStudentList()
    },
    //下载文件 todo 待解决 post请求 下载excel
    exportData () {
      //判断是否选中
      if (this.$refs.studentRef.selection.length <= 0) {
        return this.$message.warning("请先选中学生!")
      }
      //根据id数组批量删除新闻
      this.$refs.studentRef.selection.forEach(item => {
        this.ids.push(item.greatStuid)
      })

      axios({
        url:'http://localhost:8001/cykj/student/import',
        method:'post',
        data:this.ids,
        responseType: 'blob'
      }).then(function(res){
        console.log(res)
        var blob = new Blob([res.data],{ type: 'application/octet-stream'});
        var downloadElement = document.createElement('a');
        var href = window.URL.createObjectURL(blob); //创建下载的链接
        downloadElement.href = href;
        downloadElement.download = '学生资料.xlsx'; //下载后文件名
        document.body.appendChild(downloadElement);
        downloadElement.click(); //点击下载
        document.body.removeChild(downloadElement); //下载完成移除元素
        window.URL.revokeObjectURL(href); //释放掉blob对象
      }).catch(function(){
        this.$message.error("下载失败")
      })
    }
  },


}
</script>

<style scoped>
.el-input {
  width: 300px;
  margin: 10px 10px 10px 0;
}
</style>
